'use client'

import LeftMenu from '@/components/DashBoard/LeftMenu'
import Header from '@/components/Header/Index'
import { Divider } from '@nextui-org/divider'
import clsx from 'clsx'
import { useState } from 'react'

export default function DashBoardLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  const [collapsed, setCollapsed] = useState(false)
  return (
    <div className="flex h-[100vh]">
      <div
        className={clsx(
          'hidden sm:block',
          collapsed ? 'w-[100px]' : 'w-[240px]'
        )}
      >
        <LeftMenu collapsed={collapsed} setCollapsed={setCollapsed} />
      </div>
      <Divider orientation="vertical" />
      <div
        className={clsx(
          'sm:w-[calc(100vw-240px)] w-full',
          collapsed ? 'sm:w-[calc(100vw-100px)]' : 'sm:w-[calc(100vw-240px)]'
        )}
      >
        <Header />
        <div className="px-4 h-[calc(100vh-66px)] overflow-y-auto">
          {children}
        </div>
      </div>
    </div>
  )
}
